Intro
Rich text editor using Quill.js
This package enables you to add a rich text editor to your app. It's essentially Quill.js embedded, but with a small modification: header options have been removed. You can format text using bold, italic, quotes, and more, and the output is provided as HTML.Read more about Quill.js here
Demo
Components
quill-editor
This is the only component in this package. It allows you to embed the Quill.js rich text editor.
Attributes
content The editor content as HTML. theme The editor theme. You can choose between "snow" or "bubble". Defaults to "bubble". show-merge-tags Accepts Bool True/False. Default is False merge-tags Accepts an OBJECT with key/value pairs of the merge tags to be used.
Ex. { "First Name": "Andreas" }Events
input The "input" event is emitted every time the content of the editor changes. The event payload is the updated HTML content.
Style variables
The following style variables can be used to customize the styling of the editor content.
Add these to your project theme or as component style variables to override the default values.
| quill-font-color | The default font color |
| quill-bg-color | The default background color |
| quill-font-size | The default font size |
| quill-h1-size | Heading 1 font size |
| quill-h1-color | Heading 1 font color |
| quill-h2-size | Heading 2 font size |
| quill-h2-color | Heading 2 font color |
| quill-link-color | Hyperlink color |
| quill-strong-color | <strong> font color |
| quill-quote-color | Blockquote font color |
| quill-quote-border-color | Blockquote border color |